<template>
  <div class="step-container">
    <div class="step-title">2.添加主题、奖项</div>
    <div class="step-content">
      <Form :model="generateData" :label-width="75">
        <FormItem label="主题名称">
          <Input v-model="generateData.name" clearable></Input>
        </FormItem>
        <FormItem label="发证单位">
          <Input v-model="generateData.putWorker" clearable></Input>
        </FormItem>
        <div v-if="baseuser.type !== 2">
          <FormItem label="机构名称">
            <Select v-model="generateData.orgId" filterable clearable="true" disabled="false">
              <Option
                v-for="item in organizeList"
                :value="item.id"
                :key="item.id"
              >{{ item.orgName }}</Option>
            </Select>
          </FormItem>
        </div>
        <FormItem label="奖项">
          <template v-for="(modal, i) of generateData.diplomaModals">
            {{modal.name}}
            <br :key="i">
          </template>
          <Button
            type="primary"
            shape="circle"
            icon="android-add"
            @click="diplomaModalVisible = true"
          ></Button>
        </FormItem>
      </Form>
    </div>
    <Modal
      v-model="diplomaModalVisible"
      title="新增奖项"
      width="40%"
      @on-cancel="diplomaModalVisible = false"
      :mask-closable="false"
      :transfer="false"
    >
      <Form :model="diplomaFormData" :label-width="125">
        <Row>
          <Col span="18">
            <FormItem label="奖项名称">
              <Input v-model="diplomaFormData.name" clearable></Input>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="18">
            <FormItem label="奖项星级">
              <Rate show-text v-model="diplomaFormData.level"></Rate>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="saveDiploma">保存</Button>
        <Button type="ghost" style="margin-left: 8px" @click="diplomaModalVisible = false">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script src="./themeSetting.js"></script>
<style lang="less" src="./themeSetting.less"></style>